<template>
  <div class="nav">
    <div class="logo">
      <router-link to="/home" tag="a">My Blog</router-link>
    </div>
    <nav>
      <ul>
        <li><router-link to="/home" tag="a"><icon name="home"/> 首页</router-link></li>
        <li><router-link to="" tag="a"><icon name="archive"/> 归档</router-link></li>
        <li><router-link to="" tag="a"><icon name="tasks"/> 媒体</router-link></li>
        <li><router-link to="" tag="a"><icon name="i-cursor"/> 时光轴</router-link></li>
        <li><router-link to="" tag="a"><icon name="edit"/> 留言板</router-link></li>
        <li><router-link to="" tag="a"><icon name="link"/> 友人帐</router-link></li>
        <li><router-link to="" tag="a"><icon name="info-circle"/> 关于</router-link></li>
      </ul>
      <div class="right">
        <div class="search">
          <button type="button"><icon name="search" scale="1.2"/></button>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      const navbar = document.getElementsByClassName('nav')[0]
      if (document.documentElement && document.documentElement.scrollTop) {
        navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.3)'
        navbar.style.top = 0
      } else {
        navbar.style.backgroundColor = 'rgba(0, 0, 0, 0)'
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .nav{
    height: 60px;
    background-color: rgba(0, 0, 0, 0);
    min-width: 800px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    .logo {
      line-height: 60px;
      margin-left: 26px;
      font-size: 28px;
      float: left;
      font-family: "Comic Sans MS",serif;
      a {
        color: #EDEAEC;
      }
      a:hover {
        color: #FE9702;
      }
    }
    nav {
      margin: 0 auto;
      width: 50%;
      height: 60px;
      min-width: 700px;
      ul {
        li {
          float: left;
          line-height: 60px;
          margin-right: 30px;
          font-weight: bold;
          font-size: 15px;
          transition: all .3s;
          height: 50px;
          a {
            color: #EEEEEE;
          }
        }
        li:hover {
          a {
            color: #FE9702;
          }
          border-bottom: 3px solid #FE7502;
        }
      }
    }
    .right {
      float: right;
      color: #EEEEEE;
      line-height: 60px;
      .search {
        button {
          color: #EEEEEE;
          background-color: rgba(0, 0, 0, 0);
          border: 0;
          outline: 0;
          cursor: pointer;
        }
        button:hover {
          color: #FE7502;
        }
      }
    }
  }
</style>
